<template>
  <div class="app-container" :style="conheight">
    <div style="height: 100%; width: 100%">
      <div class="flexDiv">
        <div class="card-title">{{ name }}</div>
        <div>
          <el-button
            type="text"
            icon="el-icon-close"
            @click="goback"
            style="color: black"
          ></el-button>
        </div>
      </div>
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="时间选择:">
          <el-date-picker
            v-model="dateRange"
            type="datetimerange"
            size="small"
            style="width: 350px"
            range-separator="-"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            align="right"
            @change="search"
            @blur="search"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <!-- <el-button type="primary">查询</el-button> -->
          <!-- <el-button-group> -->

          <el-button
            type="primary"
            @click="search"
            icon="el-icon-search"
            size="mini"
            >搜索</el-button
          >
          <el-button @click="reset" icon="el-icon-refresh" size="mini"
            >重置</el-button
          >
          <!-- </el-button-group> -->
        </el-form-item>
      </el-form>
      <div style="display: flex">
        <div class="card-left">
          <div class="title">
            <div class="title-name">时间排序:</div>
            <!-- <div class="title-refresh" @click="handleExport">
                <i class="el-icon-download" style="margin-right: 8px"></i>导出
              </div> -->
          </div>
          <el-table
            :data="detailData"
            style="width: 100%"
            class="tableBox"
            :max-height="conheight2.height"
            @row-click="handleSelectionChange"
          >
            <el-table-column
              label="序号"
              prop="index"
              width="50"
              align="center"
            >
              <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="datetime"
              label="具体时间"
              width="220"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="doserate"
              label="总剂量(nSv/h)"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.doserate > levelOne &&
                    scope.row.doserate < levelTwo
                      ? true
                      : false
                  "
                  style="color: #e19b16"
                >
                  {{ scope.row.doserate }}
                </div>
                <div
                  v-else-if="scope.row.doserate > levelTwo ? true : false"
                  style="color: #e84b3f"
                >
                  {{ scope.row.doserate }}
                </div>
                <div v-else>{{ scope.row.doserate }}</div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getAllList"
            :pager-count="3"
            hide-on-single-page
            style="width: 370px"
            layout="total, prev, pager, next"
          />
        </div>
        <div class="card-right">
          <div class="right-title">
            <div class="title-name">多道谱图：</div>
            <div class="analyse-itemlist">
              <div class="analyse-item" style="width: 280px">
                <a>测量时间：</a>
                <a>{{ datetime }}</a>
              </div>
              <div class="analyse-item">
                <a>总剂量：</a>
                <a>{{ doserate }} nSv/h</a>
              </div>
              <div class="title-refresh">
                <i class="el-icon-download" style="margin-right: 8px"></i>导出
              </div>
            </div>
            <!-- 仅展示当前一周之内的数据图像，超出时间范围将以列表形式呈现 -->
          </div>
          <div
            id="chart"
            style="width: 95%; height: 280px; margin: 10px"
            class=""
            ref="chart"
          ></div>
          <div class="data-analyse">
            <div class="data-left">
              <div class="data-title">核素识别：</div>
              <el-table
                :data="detailData1"
                style="width: 240px"
                class="tableBox"
                max-height="200"
              >
                <el-table-column
                  label="序号"
                  prop="index"
                  width="50"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="nuclidename"
                  label="核素名称"
                  width="90"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="nuclideconf"
                  label="置信度"
                  align="center"
                  width="90"
                >
                </el-table-column>
              </el-table>
            </div>
            <div class="data-right">
              <div class="data-title">峰信息：</div>
              <el-table
                :data="detailData2"
                style="width: 440px"
                class="tableBox"
                max-height="250"
              >
                <el-table-column
                  label="序号"
                  prop="index"
                  width="50"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="fdz"
                  label="峰道值"
                  width="80"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="fnl"
                  label="峰能量(keV)"
                  align="center"
                  width="70"
                >
                </el-table-column>
                <el-table-column
                  prop="fzjs"
                  label="峰总计数(预估)"
                  align="center"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="fjjs"
                  label="峰净计数(预估)"
                  align="center"
                  width="80"
                >
                </el-table-column>
                <el-table-column prop="fbl" label="分辨率" align="center">
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { grHistoryDataList } from "@/api/emergency/perimeterData";

export default {
  name: "detail",
  props: ["id", "name", "sys", "level1", "level2"],
  data() {
    return {
      conheight: {
        height: "",
      },
      conheight2: {
        height: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近4小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 4);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近12小时",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 12);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近1天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      queryParams: {
        dateRange: "",
      }, // 查询表单
      // 日期范围
      dateRange: [],
      detailData: [],
      detailData1: [],
      detailData2: [],
      // 其他信息
      dataAvg: "",
      dateMax: "", // 分之十克
      dataAvg: "", // 平均值
      dataMin: "", // 最小值
      dataNumber: "", //
      // 右侧信息
      datetime: "", //具体时间
      doserate: "", // 总剂量
      chartData: [],
      chartx: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // name: "",
      levelOne: "",
      levelTwo: "",
    };
  },
  mounted() {
    this.init();
    this.getAllList();
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  methods: {
    getHeight() {
      this.conheight.height = window.innerHeight - 130 + "px";
      this.conheight2.height = window.innerHeight - 300 + "px";
    },
    init() {
      this.name = this.name + this.sys;
      // 一级阈值and二级阈值
      this.levelOne = parseInt(this.level1);
      this.levelTwo = parseInt(this.level2);
      const end1 = new Date();
      const start1 = new Date();
      start1.setTime(start1.getTime() - 3600 * 1000 * 4);
      this.dateRange = [start1, end1];
    },
    getAllList() {
      // const params = {
      //   sysId: this.id,
      //   beginTime: this.parseTime(this.dateRange[0]),
      //   endTime: this.parseTime(this.dateRange[1]),
      //   ...this.queryParams,
      // };
      this.$axios
        .get("/static/emergency/perimeterData/grHistoryDataList.json")
        .then((res) => {
          // grHistoryDataList(params).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.detailData = res.data.rows;
            this.total = res.data.total;
          }
        });
    },

    // 查询
    search() {
      this.getAllList();
    },
    handleSelectionChange(val) {
      console.log(val, "val----");
      this.datetime = val.datetime;
      this.doserate = val.doserate;
      // 核素识别detailData1
      var nuclideconf = val.nuclideconf.split(",");
      var nuclidename = val.nuclidename.split(";");
      this.detailData1 = [];
      for (var i = 0; i < nuclideconf.length - 1; i++) {
        this.detailData1.push({
          nuclideconf: nuclideconf[i],
          nuclidename: nuclidename[i],
        });
      }
      console.log(this.detailData1);
      // 峰信息
      var peak = val.peakinfo.split(";");
      console.log(peak);
      this.detailData2 = [];
      for (var i = 0; i < peak.length - 1; i++) {
        var peakdetail = peak[i].split(",");
        this.detailData2.push({
          fdz: peakdetail[0],
          fnl: peakdetail[1],
          fzjs: peakdetail[2],
          fjjs: peakdetail[3],
          fbl: peakdetail[4],
        });
      }
      console.log(this.detailData2, "detail2");
      // 图
      this.chartData = val.channel.split(";");
      this.chartx = [];
      for (var i = 0; i < this.chartData.length; i++) {
        this.chartx.push(i + 1);
      }
      console.log(this.chartData, this.chartx, "===========================");
      this.drawChart();
    },
    drawChart() {
      var chartDom = document.getElementById("chart");
      var myChart = this.$echarts.init(chartDom);
      var option = {
        xAxis: {
          type: "category",
          data: this.chartx,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.chartData,
            type: "line",
          },
        ],
      };
      option && myChart.setOption(option);
    },
    reset() {
      const end1 = new Date();
      const start1 = new Date();
      start1.setTime(start1.getTime() - 3600 * 1000 * 4);
      this.dateRange = [start1, end1];
      this.getAllList();
      // // chart重画
      this.chartData = [];
      this.drawChart();
    },
    goback() {
      // this.$router.go(-1);
      this.$parent.back();
    },
  },
};
</script>

<style scoped lang="scss">
// title
.flexDiv {
  display: flex;
  justify-content: space-between;
}
.title {
  height: 40px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
  padding: 4px 10px 20px 10px;
  .title-name {
    width: 80px;
  }
  .title-refresh {
    width: 70px;
    color: #1890ff;
    text-align: right;
    padding-right: 15px;
  }
}
// el-form
::v-deep .el-form {
  height: 55px;
  padding: 10px;
  .el-form-item__label {
    font-size: 14px;
    font-weight: bold;
    color: black;
  }
}
// ::v-deep .el-input__inner {
//   width: 40px;
//   // height: 28px;
//   font-size: 14px;
// }
// .el-button {
//   height: 28px;
//   width: 64px;
//   font-size: 14px;
//   line-height: 5px;
// }
.red {
  color: red;
}
.green {
  color: green;
}
.card-box {
  padding: 0px;
  // margin-bottom: 20px;
}
// right-left
.card-left {
  width: 35%;
  // height: 600px;
  // background-color: rgb(124, 66, 66);
}
.card-right {
  width: 65%;
  height: 580px;
  // margin-left:20px;
  // background-color: rgb(159, 216, 127);
  .right-title {
    height: 60px;
    font-size: 14px;
    margin-top: 10px;
    margin-left: 20px;
    .title-name {
      height: 30px;
      font-weight: bold;
    }
    .analyse-itemlist {
      height: 60px;
      width: 700px;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
    }
    .analyse-item {
      width: 200px;
      height: 30px;
      margin: 0px;
      padding: 0px;
    }
  }
  .data-analyse {
    margin: 10px;
    height: 100px;
    width: 300px;
    display: flex;
    .data-title {
      margin-left: 20px;
      height: 30px;
      font-weight: bold;
      font-size: 14px;
    }
  }
}
.card-title {
  padding-left: 10px;
  margin: 6px 0px;
  font-size: 16px;
  font-weight: bold;
}
.title-refresh {
  width: 200px;
  height: 30px;
  color: #1890ff;
  text-align: right;
  padding-right: 15px;
}

// table
::v-deep .el-table {
  // height: 460px;
  border: 0;
  padding-left: 10px;
  .el-table__header tr,
  .el-table__header th {
    height: 36px;
    color: black;
    font-size: 14px;
  }
  .el-table__body tr,
  .el-table__body td {
    height: 36px !important;
  }
  // 修改行高
  .cell {
    line-height: 20px;
  }
}
// 检测状态
.zc {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: green;
  margin: auto 9px;
}
.yjbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: orange;
  margin: auto 9px;
}
.ejbj {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: red;
  margin: auto 9px;
}
.lx {
  height: 7px;
  width: 7px;
  border-radius: 50%;
  background-color: gray;
  margin: auto 9px;
}
</style>
